<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>包裹DOM元素</title>

    <style type="text/css">
        .container {
            margin: 15px auto;
            border: 1px solid blue;
            width: 80vw;
        }

        .container>* {
            margin: 10px 0 10px 10px;
        }
    </style>

</head>
<body>

    <h3>包裹DOM元素并为为其绑定事件监听器</h3>

    <div class="container first">
        <input type="text" value="hello,ecut">
    </div>

    <div class="container second">
        <button class="load">取值</button>
        <button class="assign">赋值</button>
    </div>

    <script type="text/javascript">

        class Wrapper {
            constructor( domElement ) {
                this.$element = domElement;
            }
            on(type, listener, capture=false){
                if( this.$element ) {
                    this.$element.addEventListener(type,listener,capture);
                }
            }
            off(type, listener, capture=false){
                if( this.$element ) {
                    this.$element.removeEventListener(type,listener,capture);
                }
            }
            click(listener){
                this.on( 'click' , listener );
            }
            dblclick(listener){
                this.on( 'dblclick' , listener );
            }
            value(content){
                // 如果被包裹的 $element 是 input 或 textarea 元素
                if( this.$element.nodeName === 'INPUT' || 
                    this.$element.nodeName === 'TEXTAREA' ) {
                    // 若 content 参数是有内容的
                    if( content ) {
                        // 则将 content 赋值给 input 或 textarea 元素
                        this.$element.value = content;
                        return; 
                    }
                    // 若 content 参数是未指定的则认为是获取 input 或 textarea 的值
                    return this.$element.value ;
                }
            }
            html(content){
                // 如果被包裹的 $element 是不是 input 、textarea 、 select 元素
                if( this.$element.nodeName != 'INPUT' &&
                    this.$element.nodeName != 'TEXTAREA' &&
                    this.$element.nodeName != 'SELECT' ) {
                    // 若 content 参数是有内容的
                    if( content ) {
                        // 则用 content 替换 $element 内部的 HTML
                        this.$element.innerHTML = content;
                        return; 
                    }
                    // 若 content 参数是未指定的则认为是 $element 内部的 HTML
                    return this.$element.innerHTML ;
                }
            }
        }

        const $ = selector => {
            let dom = document.querySelector( selector );
            let w = new Wrapper( dom );
            return w ;
        };

        let loadBtn = $('.load');
        let handleLoad = evt => {
            let wrapped = $('.first>input');
            alert( wrapped.value() );
        }
        loadBtn.click( handleLoad );

        let assignBtn = $('.assign');
        let handleAssign = evt => {
            let wrapped = $('.first>input');
            wrapped.value( 'hello,china' );
        }
        assignBtn.click( handleAssign );
    </script>
    
</body>
</html>